<template>
  <div class="collection-container">
    <h1 class="collection-title">博物馆藏品</h1>

    <!-- 管理员操作区 -->
    <div v-if="userStore.isAdmin()" class="admin-controls">
      <el-button type="primary" @click="showAddDialog = true">
        <el-icon><Plus /></el-icon> 添加藏品
      </el-button>
    </div>

    <!-- 藏品列表展示区 -->
    <div class="collection-list">
      <div v-if="collectionStore.collections.length === 0" class="no-data">
        <el-empty description="暂无藏品数据" />
      </div>
      <div
        v-for="(item, index) in collectionStore.collections"
        :key="item.id"
        class="collection-item"
        :class="{ 'left-align': index % 2 === 0, 'right-align': index % 2 === 1 }"
      >
        <div class="collection-image-container">
          <div v-if="item.image" class="image-wrapper">
            <img :src="item.image" :alt="item.name" class="collection-image" />
          </div>
          <div v-else class="no-image">
            <el-icon><Picture /></el-icon>
            <span>暂无图片</span>
          </div>
        </div>

        <div class="collection-info">
          <div class="info-header">
            <h2>{{ item.name }}</h2>
            <div v-if="userStore.isAdmin()" class="action-buttons">
              <el-button type="primary" size="small" @click="editCollection(item)">
                <el-icon><Edit /></el-icon>
              </el-button>
              <el-button type="danger" size="small" @click="confirmDelete(item.id)">
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
          </div>

          <div class="info-content">
            <div class="info-item">
              <h3>年代</h3>
              <p>{{ item.era }}</p>
            </div>
            <div class="info-item">
              <h3>材质</h3>
              <p>{{ item.material }}</p>
            </div>
            <div class="info-item">
              <h3>尺寸</h3>
              <p>{{ item.size }}</p>
            </div>
            <div class="info-item description">
              <h3>描述</h3>
              <p>{{ item.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加/编辑藏品对话框 -->
    <el-dialog
      v-model="showAddDialog"
      :title="isEditing ? '编辑藏品' : '添加藏品'"
      width="500px"
    >
      <el-form :model="collectionForm" label-position="top">
        <el-form-item label="藏品名称">
          <el-input v-model="collectionForm.name" placeholder="请输入藏品名称" />
        </el-form-item>

        <el-form-item label="年代">
          <el-input v-model="collectionForm.era" placeholder="请输入藏品年代" />
        </el-form-item>

        <el-form-item label="材质">
          <el-input v-model="collectionForm.material" placeholder="请输入藏品材质" />
        </el-form-item>

        <el-form-item label="尺寸">
          <el-input v-model="collectionForm.size" placeholder="请输入藏品尺寸" />
        </el-form-item>

        <el-form-item label="描述">
          <el-input
            v-model="collectionForm.description"
            type="textarea"
            :rows="4"
            placeholder="请输入藏品描述"
          />
        </el-form-item>

        <el-form-item label="藏品图片">
          <el-upload
            class="upload-container"
            action=""
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleImageChange"
          >
            <div v-if="collectionForm.image" class="preview-image">
              <img :src="collectionForm.image" alt="预览图" />
              <div class="preview-actions">
                <el-button type="primary" size="small">更换图片</el-button>
              </div>
            </div>
            <el-button v-else type="primary">
              <el-icon><Upload /></el-icon> 上传图片
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showAddDialog = false">取消</el-button>
          <el-button type="primary" @click="saveCollection">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog
      v-model="showDeleteDialog"
      title="确认删除"
      width="300px"
    >
      <p>确定要删除这个藏品吗？此操作不可恢复。</p>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDeleteDialog = false">取消</el-button>
          <el-button type="danger" @click="deleteCollection">删除</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useUserStore } from '../stores/user'
import { useCollectionStore, type Collection } from '../stores/collection'
import { ElMessage } from 'element-plus'
import { Plus, Edit, Delete, Picture, Upload } from '@element-plus/icons-vue'

const userStore = useUserStore()
const collectionStore = useCollectionStore()

// 表单数据
const collectionForm = reactive({
  id: '',
  name: '',
  image: '',
  description: '',
  era: '',
  material: '',
  size: ''
})

// 控制对话框显示
const showAddDialog = ref(false)
const showDeleteDialog = ref(false)
const isEditing = ref(false)
const currentDeleteId = ref('')

// 编辑藏品
function editCollection(collection: Collection) {
  isEditing.value = true
  collectionForm.id = collection.id
  collectionForm.name = collection.name
  collectionForm.image = collection.image
  collectionForm.description = collection.description
  collectionForm.era = collection.era
  collectionForm.material = collection.material
  collectionForm.size = collection.size
  showAddDialog.value = true
}

// 确认删除
function confirmDelete(id: string) {
  currentDeleteId.value = id
  showDeleteDialog.value = true
}

// 删除藏品
function deleteCollection() {
  if (collectionStore.deleteCollection(currentDeleteId.value)) {
    ElMessage.success('藏品删除成功')
    showDeleteDialog.value = false
  } else {
    ElMessage.error('藏品删除失败')
  }
}

// 处理图片上传
function handleImageChange(file: any) {
  const reader = new FileReader()
  reader.onload = (e) => {
    collectionForm.image = e.target?.result as string
  }
  reader.readAsDataURL(file.raw)
}

// 保存藏品
function saveCollection() {
  if (!collectionForm.name) {
    ElMessage.warning('请输入藏品名称')
    return
  }

  if (isEditing.value) {
    // 更新藏品
    const { id, ...updateData } = collectionForm
    if (collectionStore.updateCollection(id, updateData)) {
      ElMessage.success('藏品更新成功')
      showAddDialog.value = false
    } else {
      ElMessage.error('藏品更新失败')
    }
  } else {
    // 添加新藏品
    const { id, ...newCollection } = collectionForm
    collectionStore.addCollection(newCollection)
    ElMessage.success('藏品添加成功')
    showAddDialog.value = false
  }

  // 重置表单
  resetForm()
}

// 重置表单
function resetForm() {
  isEditing.value = false
  collectionForm.id = ''
  collectionForm.name = ''
  collectionForm.image = ''
  collectionForm.description = ''
  collectionForm.era = ''
  collectionForm.material = ''
  collectionForm.size = ''
}
</script>

<style lang="scss" scoped>
.collection-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.collection-title {
  text-align: center;
  margin-bottom: 30px;
  color: #8b5a2b;
  font-size: 28px;
}

.admin-controls {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}

.collection-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.collection-item {
  display: flex;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-5px);
  }

  &.left-align {
    flex-direction: row;
  }

  &.right-align {
    flex-direction: row-reverse;
  }
}

.collection-image-container {
  flex: 0 0 40%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;

  .image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    height: 100%;
    width: 100%;

    .el-icon {
      font-size: 48px;
      margin-bottom: 10px;
    }
  }
}

.collection-info {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;

  h2 {
    margin: 0;
    color: #8b5a2b;
    font-size: 22px;
  }

  .action-buttons {
    display: flex;
    gap: 10px;
  }
}

.info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-item {
  h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: #666;
  }

  p {
    margin: 0;
    color: #333;
  }

  &.description {
    margin-top: 10px;

    p {
      line-height: 1.6;
    }
  }
}

.no-data {
  padding: 40px 0;
}

.preview-image {
  width: 100%;
  max-height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;

  img {
    width: 100%;
    object-fit: cover;
  }

  .preview-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 8px;
    display: flex;
    justify-content: center;
  }
}

.upload-container {
  width: 100%;
}

@media (max-width: 768px) {
  .collection-item {
    flex-direction: column !important;

    .collection-image-container {
      height: 200px;
    }
  }
}
</style>
